<!doctype html>
<html lang='en-GB'>
<head>
  <meta charset='utf-8'>
  <style>
    body {
      background: #fafafa;
    }

    furo-demo-snippet {
      height: 90vh;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
<div id='demo'></div>

<script type='module'>
  import { html, render } from 'lit'
  import './initEnv.js'



  // eslint-disable-next-line import/no-extraneous-dependencies
  import '@furo/data/src/furo-deep-link.js'
  // eslint-disable-next-line import/no-extraneous-dependencies
  import '@furo/data/src/furo-collection-agent.js'
  // eslint-disable-next-line import/no-extraneous-dependencies
  import '@furo/data/src/furo-data-object.js'
  // eslint-disable-next-line import/no-extraneous-dependencies
  import '@furo/data/src/furo-hateoas-state.js'
  // eslint-disable-next-line import/no-extraneous-dependencies
  import '@furo/util/src/doc/furo-demo-snippet.js'
  // eslint-disable-next-line import/no-extraneous-dependencies
  import '@furo/layout/src/furo-form-layouter.js'


  render(
    html`

      <furo-demo-snippet>
        <template>

          <div>
            <button data-rel='list'>list</button>
            <button hide-no-rel data-rel='list'>hide no rel</button>
            <button data-rel='add'>add</button>
            <furo-hateoas-state fn-bind-hts='--collection(*.links)' fn-enable='--enableClicked' fn-disable='--disableClicked'></furo-hateoas-state>
          </div>


          <button at-click='--listClicked'>list</button>
          <button at-click='--enableClicked'>enable</button>
          <button at-click='--disableClicked'>disable</button>

          <furo-data-object type='person.PersonCollection' at-object-ready='--collection'
                            fn-inject-raw='--response'></furo-data-object>
          <furo-location at-location-changed='--locationChanged'></furo-location>
          <furo-deep-link service='PersonService' at-hts-out='--hts'
                          fn-qp-in='--locationChanged(*.query)'></furo-deep-link>

          <furo-collection-agent service='PersonService' fn-hts-in='--hts' fn-search='--searchRequest'
                                 fn-list='--listClicked' at-response='--response'>
          </furo-collection-agent>


        </template>
      </furo-demo-snippet>


    `,
    document.querySelector('#demo'),
  )
</script>
</body>
</html>
